<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>类别管理-云校通_教师版</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="<%=basePath%>/style/icon.css"/>
    <style>
      .main{
        position: relative;
      }
      .main .delete{
        position: absolute; right: 2%; top: 16px;
        font-size: 12px;
        color: #18b4ed;
      }
      .main h2{
        font-size: 14px;
        font-weight: normal;
        color: #18b4ed;
        height: 40px;
        line-height: 40px;
        margin-left: 4%;
      }
      .main .typeName{
        position: relative;
        background: #fff;
        height: 50px;
        border-bottom: 1px solid #ccc;
      }
      .main .typeName p{
        line-height: 50px;
        margin-left: 4%;
        font-size: 16px;
      }
      .main .typeName input{
        position: absolute; right: 4%; top: 16px;
        font-size: 16px;
        text-align: right;
        outline: none;
        border: none;
      }
      .main .typeChoose{
        position: relative;
        background: #fff;
        height: 50px;
        border-bottom: 1px solid #ccc;
      }
      .main .typeChoose p{
        line-height: 50px;
        margin-left: 4%;
        font-size: 16px;
      }
      .main .typeChoose span{
        position: absolute; right: 4%; top: 0;
        line-height: 50px;
      }
      .main .typeChoose span:before{
        color: #ccc !important;
      }
      .main .typeChoose .f-blue:before{
        color: #18b4ed !important;
      }
      b{
        position: relative; left: 50%; top: 40px;
        margin-left: -34px;
        font-weight: normal;
        font-size: 18px;
        color: #18b4ed;
      }
      .weui_btn_area{
        margin-top: 100px !important;
        margin-bottom: 100px !important;
      }
    </style>
  </head>
  
  <body ontouchstart>
  
    <jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
    <div class="weui-header bg-blue"> 
		<div class="weui-header-left"> <a onclick="back()" class="icon icon-109 f-white">返回</a></div>
		<h1 class="weui-header-title">类别添加</h1>
    </div>
    <main>
      <div class="main" v-for="item in mainList">
        <h2>类别{{item.num}}</h2>
        <span class="delete" @click="deleteData(item)" v-show="item.num != 1">删除</span>
        <div class="typeName">
          <p>类别名称</p>
          <input v-model="item.typeName" placeholder="请输入类别名称">
          <input v-model="item.ischecked" type="hidden">
          <input type="hidden">
        </div>
        <div class="typeChoose">
          <p>是否消耗品</p>
          <span @click="changeColor(item)" :class="item.classs"></span>
        </div>
      </div>
      <b @click="addItem">+增加明细</b>
      <div class="weui_btn_area clear" style="padding-bottom: 60px;">
        <a href="javascript:" @click="submit" class="weui_btn bg-blue">提交</a>
      </div>
    </main>

    <script src="<%=basePath%>/js/vue.js"></script>
    <script>
      var vm = new Vue ({
        el:"main",
        data: {
          mainList: [{
            num: 1,
            typeName: '',
            ischecked: 1,
            classs: 'weui_icon_success_no_circle'
          }]
        },
        methods:{
          changeColor (item) {
            
            if (item.ischecked === 1) {
            	item.ischecked = 0
              item.classs = 'weui_icon_success_no_circle f-blue'
            } else {
            	item.ischecked = 1
              item.classs = 'weui_icon_success_no_circle'
            }
          },
          addItem () {
            var a = this.mainList.length + 1
            this.mainList.push({
              num: a,
              typeName: '',
              ischecked: 0,
              classs: 'weui_icon_success_no_circle'
            })
          },
          deleteData (item) {
            var index = this.mainList.indexOf(item)
            this.mainList.splice(index, 1)
            for (var i = 1; i < this.mainList.length; i++) {
              this.mainList[i].num = this.mainList[i].num - 1
            }
          },
          submit(){
        	  var inputText = [];
        	  for (var i = 0; i < vm.mainList.length; i++) {
        		  if(this.mainList[i].typeName == null || this.mainList[i].typeName==''){
                     $.alert("类别名称不为空","");
                     return;
        		  }else{
        			  inputText.push({"typeName": this.mainList[i].typeName,"cycleUse":this.mainList[i].ischecked})
        		}
              }
        	  $.ajax({
      			url: basePath + '/ls/school/property/type/add',
      			type: 'post',
      			contentType: "application/json; charset=utf-8",
      			data: JSON.stringify(inputText),
      			success: function(data) {
      			window.location.href =(basePath + "/ls/school/property/goodTypeManageIndex?dateTime=" + new Date().getTime());
      			},
                  error: function(xhr, type){
                  	$.toptips("系统异常");
                  }
      		});
          }
          
        }
      })
    </script>
  </body>
   <jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</html>